<template>
    <div style="font-size: .16rem">
        <head-top :head-title="title" go-back='true' go-path="/home/selectMenu"></head-top>
        <div style="position: relative;width: 100%;height: .4rem"></div>
            <div v-if="comunication.length > 0">
                <div v-for="part in comunication" style="margin: .1rem">
                    <p style="font-size: .15rem;font-weight: bold">{{part.scenarioName}}</p>
                    <div style="font-size: .13rem;margin-bottom:.1rem" v-for="chat in part.chatContent">
                        <div v-if="chat.priority == 'A'">
                            <p style="color: #09bb07;">me：{{chat.contentA}}</p>
                            <p style="color: #ff6810;">npc：{{chat.contentB}}</p>
                        </div>
                        <div v-else>
                            <p style="color: #ff6810;">npc：{{chat.contentB}}</p>
                            <p style="color: #09bb07;">me：{{chat.contentA}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else style="font-size: .13rem;"><span>无对话记录</span></div>
    </div>
</template>

<script>
    import headTop from '@/components/commons/common/headTop.vue';
    import {mapState, mapMutations} from 'vuex';
    export default {
        data() {
            return {
                title: '对话记录',
                partid: null,
                comunication: []
            }
        },
        created() {
            this.partid = this.$route.query.partid;
        },
        mounted() {
            console.log(this.partChat)
            this.initChat()
        },
        watch: {
            partChat(val) {
                this.comunication = val;
            }
        },
        components: {
            headTop
        },
        computed: {
            ...mapState([
                'partChat'
            ]),
        },
        methods: {
            ...mapMutations([
                'GET_CHATLIST'
            ]),
            initChat() {
                this.GET_CHATLIST(this.partid);
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-active {
        opacity: 0;
    }
</style>